<template>
	<view class="flex flex-col h-screen">
		<NavBarVue title="人工解讀"></NavBarVue>
		<view class="flex-1 overflow-hidden bg-white rounded-lg">
			<scroll-view scroll-y="true" class="h-full">
				<view class="p-30">
					<view class="mb-20">
						<text class="text-sm font-bold">您的具体问题是</text>
						<uni-easyinput class="mt-20" type="textarea" autoHeight v-model="postFrom.describe"
							placeholder="我最近总是觉得做什么都没干劲总觉得自己很无能，想知道自己是不是抑郁了."></uni-easyinput>
					</view>
					<view class="mb-20">
						<text class="text-sm font-bold">补充说明:</text>
						<uni-easyinput class="mt-20" v-model="postFrom.replenishment" placeholder="总是听到一些奇怪的声音。"></uni-easyinput>
					</view>
					<view class="mb-20">
						<text class="text-sm font-bold">例如:</text>
						<view class="bg-[#F0F3F4] p-20 text-[#666666] mt-20">总是听到一些奇怪的声音。</view>
					</view>
					<FromList class="mb-20" title="出生时间">
						<uni-datetime-picker type="date" v-model="birthday_str">
							<view class="flex justify-end items-center">
								<view><text class="" v-if="birthday_str">{{birthday_str}}</text></view>
								<uni-icons type="right" size="18"></uni-icons>
							</view>
						</uni-datetime-picker>
					</FromList>
					<FromList class="mb-20" title="生肖">
						<picker @change="bindPickerChange" :value="zodiacIdx" :range="zodiacList">
							<view class="flex items-center">
								<view class="">{{zodiac || '请选择'}}</view>
								<uni-icons type="right" size="18"></uni-icons>
							</view>
						</picker>
					</FromList>
					<FromList class="mb-20" title="选数字">
						<view class="flex items-center" @click="handleChange">
							<view class="">{{postFrom.selcard || '请选择'}}</view>
							<uni-icons type="right" size="18"></uni-icons>
						</view>
					</FromList>
					<view class="mb-20">
						<text class="text-sm font-bold">支付类型</text>
						<view class="flex items-center pt-20 pb-20">
							<radioCompVue v-model="postFrom.paysts" :item="item" v-for="(item, idx) in payList" :key="idx">
							</radioCompVue>
						</view>
					</view>
					<view class="flex justify-center items-center mt-20" v-if="postFrom.sinpay">
						<text class="text-sm font-bold mr-10">您本次需要支付</text>
						<ImageBoxVue :src="postFrom.paysts==0?'/static/icons/blue.png':'/static/icons/red.png'" width="28rpx"
							height="28rpx">
						</ImageBoxVue>
						<view class="text-sm font-bold ml-10">
							<text> {{postFrom.sinpay}}*{{postFrom.pret}} = {{postFrom.sinpay * postFrom.pret * 1}}</text>
							<text class="ml-10">颗{{postFrom.paysts==0?'蓝钻':'红钻'}}</text>
						</view>
					</view>
					<view class="my-20">
						<button class="rounded-full" type="primary"
							@click="onPlay">确认支付{{payPrice}}颗{{postFrom.paysts==0?'蓝钻':'红钻'}}</button>
					</view>
					<AgreementPlatformVue v-model="isAgree"></AgreementPlatformVue>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		computed,
	} from 'vue';
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	import FromList from '@/components/FromList.vue';
	import radioCompVue from '@/components/radioComp.vue';
	import sendSettingVue from "./components/sendSetting.vue"
	import AgreementPlatformVue from '../login/components/AgreementPlatform.vue';
	import communityApi from '@/apis/apiList/communityApi';
	import indexApi from '@/apis/apiList/indexApi.js';
	import testApi from '@/apis/apiList/testApi';

	const typeList = ref([])
	const posts = ref("") // 板块類型
	const bbsplateId = ref("") // 板块Id
	const bbsplate = ref({}) // 板块信息
	const postFrom = ref({
		paysts: 0, //支付方式
		sinpay: "", //支付金额
		prv: 1, //私有
		pret: 1, //解读人数
		sec: 0, //保密
		exp: 0, //游客讲解 
		obs: 0, //评论
		sdes: 0, // 是否有牌阵信息，0否 1是
		describe: "", //描述
		selcard: "", // 
		ppst: 2, // 帖子类型 0 普通贴 1定向贴 2 快速贴
		posts: 3
	})
	const selcard = ref("") // 星图档案ID字符串
	const systemSetting = ref([]) // 系统设置列表
	const isAgree = ref(false)
	const items = ref([])
	const pickerRef = ref(null)
	const deckId = ref("")
	const birthday_str = ref("")
	const zodiac = ref("")
	const zodiacIdx = ref("")
	systemSetting.value = uni.getStorageSync('dict');
	const payList = [{
		text: "蓝钻",
		value: 0
	}, {
		text: "红钻",
		value: 1
	}]
	const zodiacList = ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪']
	const payPrice = computed(() => {
		if (postFrom.value.sec == 1) {
			return postFrom.value.sinpay * postFrom.value.pret * 1 + 12
		} else {
			return postFrom.value.sinpay * postFrom.value.pret * 1
		}
	})
	watch(() => {
		return postFrom.value.paysts
	}, () => {
		systemSetting.value.map(item => {
			if (postFrom.value.paysts == 0) {
				if (item.name == 'Fastquestion_NumberCardBlue') {
					postFrom.value.sinpay = item.kbidc
				}
			}
			if (postFrom.value.paysts == 1) {
				if (item.name == 'Fastquestion_NumberCardRed') {
					postFrom.value.sinpay = item.kbidc
				}
			}
		})
	}, {
		immediate: true
	})

	onLoad((option) => {
		postFrom.value.describe = option.describe
		systemSetting.value.map(item => {
			if (postFrom.value.paysts == 0) {
				if (item.name == 'Fastquestion_NumberCardBlue') {
					postFrom.value.sinpay = item.kbidc
				}
			}
			if (postFrom.value.paysts == 1) {
				if (item.name == 'Fastquestion_NumberCardRed') {
					postFrom.value.sinpay = item.kbidc
				}
			}
		})
		getWorkBbsplatelist()
		getTypeList()
	})
	const onPlay = () => {
		console.log(birthday_str.value)
		if (postFrom.value.describe == '') {
			uni.showToast({
				icon: "none",
				title: "请填写您的问题！"
			})
			return
		}
		if (birthday_str.value == '') {
			uni.showToast({
				icon: "none",
				title: "请选择生日！"
			})
			return
		}
		if (zodiac.value == '') {
			uni.showToast({
				icon: "none",
				title: "请选择生肖！"
			})
			return
		}
		if (postFrom.value.selcard == '') {
			uni.showToast({
				icon: "none",
				title: "请选择数字！"
			})
			return
		}
		if (!isAgree.value) {
			uni.showToast({
				icon: "none",
				title: "请同意平台规则！"
			})
			return
		}
		const params = {
			"member.id": uni.getStorageSync('user').id,
			"bbsplate.id": '1321849359872032768',
			...postFrom.value,
			problem: `${birthday_str.value},${zodiac.value}`
		}
		console.log(params)
		communityApi.generatePoss(params).then(res => {
			uni.showToast({
				icon: "none",
				title: '测试成功'
			})
			setTimeout(() => {
				uni.navigateTo({
					url: `/pages/test/quickDetails?id=${res.data.id}`
				})
			}, 1000)
		})
	}
	const bindPickerChange = (e) => {
		zodiacIdx.value = e.detail.value
		zodiac.value = zodiacList[zodiacIdx.value]
	}
	const handleChange = () => {
		uni.$on('chooseNum', (arr) => {
			console.log(arr)
			postFrom.value.selcard = arr.join(',')
		})
		uni.navigateTo({
			url: `/pages/views/chooseNum?num=3`
		})
	}
	const getWorkBbsplatelist = () => {
		communityApi.getWorkBbsplatelist().then(res => {
			typeList.value = res.data
		})
	}
	const getTypeList = () => {
		testApi.getCardtpyelistAndson().then(res => {
			res.data.map(item => {
				item.level = 1
			})
			formatData(res.data)
			items.value = res.data
		})
	}
</script>

<style lang="scss" scoped>
	.position-absolute {
		position: absolute;
		top: -2000rpx;
		z-index: 0;
	}
</style>